<template>
    <div class="editorRecord">

      <!-- 编辑对话框 -->
      <EditorRecordEdit ref="editDialog" v-on:refreshRecord="refreshRecord"/>

      <!-- 接口列表 -->
      <el-table
        :data="methodList"
        @selection-change="handleSelectionChange"
        style="min-height: 60vh"
        stripe
        border>
        <el-table-column
          type="selection"
          align='center'
          width="40">
        </el-table-column>
        <el-table-column
          align='center'
          prop="method"
          width="60"
          label="方法">
        </el-table-column>
        <el-table-column
          align='center'
          prop="id"
          width="200"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="name"
          label="接口链接">
        </el-table-column>
        <el-table-column
          align='center'
          prop="opt"
          label="操作"
          width="60">
          <template slot="header" slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-plus" circle @click="onCreateRecord(scope)"/>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="onEditRecord(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 接口操作 -->
      <div style="padding-top: 30px;padding-bottom: 30px;">
        <el-button style="margin:20px" type="primary" @click="onCopyRecord">复制一个新接口</el-button>
        <el-button style="margin:20px" type="danger" @click="onDeleteRecord">删除选中的接口</el-button>
      </div>
    </div>
</template>

<style>

</style>

<script>
import EditorRecordEdit from './EditorRecordEdit'
export default {
  components: {
    'EditorRecordEdit': EditorRecordEdit
  },
  methods: {
    // 加载记录
    loadRecord (device) {
      this.device = device
      this.refreshRecord()
    },
    // 刷新记录
    refreshRecord () {
      this.$http.get('/func/loadMethods', {
        params: {
          id: this.device.id
        }
      })
        .then((res) => {
          if (res.status === 200) {
            this.methodList = res.body
          }
        })
    },
    onCreateRecord () {
      // 新建一条记录
      this.$refs.editDialog.openEdit(this.device.id, null)
    },
    onEditRecord (id) {
      // 编辑一条记录
      this.$refs.editDialog.openEdit(this.device.id, id)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onCopyRecord () {
      if (this.multipleSelection.length === 0) {
        return
      }
      this.$confirm('确定要复制当前已经勾选的接口？')
        .then(_ => {
          var successCallback = (resp) => {
            if (resp.body.code !== 0) {
              // 请求失败
              this.$notify({
                message: resp.body.msg,
                type: 'warning'
              })
              this.loadRecord(this.device)
            } else {
              this.$notify({
                message: '复制成功',
                type: 'success'
              })
              this.loadRecord(this.device)
            }
          }
          var param = {
            copyList: this.multipleSelection
          }
          this.$http.post('/func/copyMethods', param, {
            params: {
              deviceId: this.device.id
            },
            emulateJSON: false
          }).then(successCallback)
        })
        .catch(_ => {})
    },
    onDeleteRecord () {
      if (this.multipleSelection.length === 0) {
        return
      }
      this.$confirm('危险！！！确定要删除接口？本操作不可逆转！')
        .then(_ => {
          var successCallback = (resp) => {
            if (resp.body.code !== 0) {
              // 请求失败
              this.$notify({
                message: resp.body.msg,
                type: 'warning'
              })
              this.loadRecord(this.device)
            } else {
              this.$notify({
                message: '删除成功',
                type: 'success'
              })
              this.loadRecord(this.device)
            }
          }
          var param = {
            deleteList: this.multipleSelection
          }
          this.$http.post('/func/deleteMethods', param, {
            params: {
              deviceId: this.device.id
            },
            emulateJSON: false
          }).then(successCallback)
        })
        .catch(_ => {})
    }
  },
  data () {
    return {
      device: {},
      methodList: [],
      multipleSelection: []
    }
  }
}
</script>
